/** 
 * 1.shallowReactive ,shallowRef
 * 2.shallowReadonly
 * 3.reactive,ref
 * 4.readonly
 */
function shallowRef(val) {
  return shallowReactive({
    value: val
  })
}

function reactive(obj) {
  if (typeof obj === "object") {
    if (obj instanceof Array) {
      // 如果是一个数组，那么取出数组中的每一个元素，
      // 判断每一元素是否又是一个对象，如果又是一个对象，那么也需要包装成Proxy
      obj.forEach((item, index) => {

        if (typeof item === "object") {
          obj[index] = reactive(item);
        }
      })
    } else {
      // 如果是一个对象，那么取出对象属性的取值，
      // 判断对象属性的取值是否又是一个对象，如果又是一个对象，那么也需要包装成Proxy
      for (let key in obj) {
        let item = obj[key]
        if (typeof item === "object") {

          obj[key] = reactive(item);
        }
      }
    }


    return new Proxy(obj, {
      get(obj, key) {
        return obj[key]
      },
      set(obj, key, val) {
        obj[key] = val;
        console.log("更新ui界面")
        return true
      }
    })
  } else {
    console.warn("message:`${obj} is not object`")
  }

}
/**
let obj = {
  a: "a",
  gf: {
    b: "b",
    f: {
      c: "c",
      s: {
        d: "d"
      }
    }
  }
}
let state = reactive(obj)
state.a = 1;
state.gf.b = 2;
state.gf.f.c = 3;
state.gf.f.s.d = 4;
 */
let arr = [{
  id: 1,
  name: "鲁班"
}, {
  id: 2,
  name: "虞姬"
}]
let state = reactive(arr)
state[0].name = "zs";
state[1].id = 3